﻿<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta content="target-densitydpi=320,width=750,user-scalable=no" name="viewport" />
    <meta content="no" name="apple-touch-fullscreen" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>交易记录</title>
    <!--<link href="css/css.css" rel="stylesheet" type="text/css">-->
    <!--<script src="js/jquery.1.8.2.min.js"></script>-->
    <!--<script src="js/style.js"></script>-->
    <link href="css/css.css" rel="stylesheet" type="text/css">
<link href="css/red.css" rel="stylesheet" type="text/css"><script src="js/jquery.1.8.2.min.js"></script><script src="js/style.js"></script>    <link rel="stylesheet" href="css/dropload.css">
    <script src="js/dropload.min.js"></script>
    <script src="js/layer.js"></script>
    <!--时间选择插件-->
    <link rel="stylesheet" href="css/datepick.css">
    <script src="js/date.js"></script>
    <script src="js/iscroll.js"></script>
</head>

<body>
    <header>
        <em onclick="goAccountIndex()">返回</em>
        <h1>交易记录</h1>
        <div class="headerRight">
            <ul>
                <li id="reset">重置</li>
            </ul>
        </div>
    </header>
    <section>
        <div class="bettingRecord">
            <!-- <div class="bettingRecordSearch">
                <div class="teamSearchCondition clearfix" style="margin-bottom: 30px">
                    <div class="teamSearch">
                        <span>从：</span>
                        <label>
                            <input type="text" class="inputDate" placeholder="年" value="" id="startTime" disabled>
                            <input name="start_time" type="date" placeholder="年" value="" onchange="getData()">
                        </label>
                    </div>
                    <div class="teamSearch">
                        <span>到：</span>
                        <label>
                            <input type="text" class="inputDate" placeholder="年" value="" id="end_time" disabled>
                            <input name="end_time" type="date" placeholder="年" value="" onchange="getData()">
                        </label>
                    </div>
                </div>
                <div class="BRSearchCondition clearfix" style="margin-bottom: 0">
                    <div>
                        <span id="type">交易类型：</span>
                        <label>
                            <em class="inputW">全部</em>
                            <select class="select" name="type" onchange="getData()">
                                                                <option value="0">全部</option>
                                                                <option value="1">充值</option>
                                                                <option value="2">提现</option>
                                                                <option value="3">投注</option>
                                                                <option value="4">返水</option>
                                                                <option value="5">返利</option>
                                                                <option value="6">其它</option>
                                                            </select>
                        </label>
                    </div>
                    <div>
                        <span>交易状态：</span>
                        <label>
                            <em class="inputW">全部</em>
                            <select class="select" name="status" onchange="getData()">
                                <option value="0">全部</option>
                                <option value="1">处理中</option>
                                <option value="2">已完成</option>
                            </select>
                        </label>
                    </div>
                </div>
            </div> -->
            <div class="betting-search-wrap">
                <div class="select-betting">
                    <div class="select-item" id="type" data-id="0">全部类型</div>
                    <div class="select-item" id="status" data-num="0">全部状态</div>
                    <div class="time-item" id="timeSelect">时间筛选</div>
                </div>
                <div class="time-betting">
                    <span id="startT"><em>2018-02-03</em></span> 至
                    <span id="endT"><em>2018-02-03</em></span>
                    <!--                    <span><input type="text" class="inputDate" placeholder="年" value="" id="startTime" disabled></span>
                    至<span><input name="start_time"  id="endTime" type="date" placeholder="年" value="" onchange="getData()"></span>
 -->
                </div>
            </div>
            <div class="bettingRecordList">
                <ul id="record_list">
                </ul>
            </div>
        </div>

        <!--底部弹窗-->
        <div class="mask" style="display: none"></div>
        <div class="pop-wrap down" id="type-pop">
            <div class="pop-select">
                <div class="title">选择交易类型</div>
                <div class="content">
                    <ul class="content-inner clearfix">
                                                 <li data-id="0" class="active">全部类型</li>
                                                  <li data-id="1">充值</li>
                                                  <li data-id="2">提现</li>
                                                  <li data-id="3">投注</li>
                                                  <li data-id="4">返水</li>
                                                  <li data-id="5">返利</li>
                                                  <li data-id="6">其它</li>
                                             </ul>
                </div>
            </div>
            <div class="bottom-con">
                <a javascript="void(0)" ; type="button" class="pop-cansel">取消</a>
            </div>
        </div>
        <div class="pop-wrap down" id="status-pop">
            <div class="pop-select">
                <div class="title">选择交易状态</div>
                <div class="content">
                    <ul class="content-inner clearfix">
                                          		                        <li data-id="0" class="active">全部状态</li>
	                                                                     		                        <li data-id="1">处理中</li>
	                                                                     		                        <li data-id="2">已完成</li>
	                                                                        
                    </ul>
                </div>
            </div>
            <div class="bottom-con">
                <a javascript="void(0)" ; type="button" class="pop-cansel">取消</a>
            </div>
        </div>
        <div class="pop-wrap down" id="date-pop">
            <div class="pop-select pop-bg-white">
                <div class="title">选择时间</div>
                <div class="content">
                    <div class="demo">
                        <div class="lie">日期设置-1:<input  id="beginTime" class="kbtn" /></div>
                        <div class="lie">日期设置-2:<input id="endTime" class="kbtn" /></div>
                    </div>
                    <div id="datePlugin-begin"></div>
                    <div id="datePlugin-end"></div>
                    <div class="btn_warp"><span id="confirm-getDate">确定</span></div>
                </div>
            </div>
            <div class="bottom-con">
                <a javascript="void(0)" ; type="button" class="pop-cansel">取消</a>
            </div>
        </div>
    </section>
    <script type="text/javascript">
    var start_time = $("#startT em").text();
    var end_time = $("#endT em").text();
    var type = $("#type").attr("data-id");
    var status = $("#status").attr("data-num");
    // var start_time = new Date();
    var windowHeight = $(window).height();

    var id; //时间选择插件变量
    var page = 1;
    $(function() {
        readyFun();

        //初始化时间选择插件
        $('#beginTime').date();
        //	$('#endTime').date({theme:"datetime"});
        $('#endTime').date();
        $('#beginTime').click();
        id = 1;
        $('#endTime').click();
    })

    function readyFun() {
        $('#record_list').html("");
        $('.bettingRecordList').dropload({
            loadDownFn: function(me) {
                getAjax(me);
                page++; //页面加1
            },
            threshold: 50
        });
    }

    function getAjax(me) {
        var result = '';
        //筛选符合要求的类型可以查看详情
        var href_d = '';
        var start_time = $("#startT em").text();
        var end_time = $("#endT em").text();

        console.log("--页码：" + page + "--开始时间：" + start_time + "--结束时间：" + end_time + "--类型：" + type + "--状态：" + status);
        $.ajax({
            type: 'GET',
            url: "https://www-pc77.com/?m=web&c=account&a=getBills" + "&start_time=" + start_time + "&end_time=" + 　end_time + "&type=" + type + "&page=" + page + "&status=" + status,
            dataType: 'json',
            success: function(data) {
                var dataLen = data.list.length;
                if (page > 2) {
                    $('.zhanwei').removeClass('zhanwei');
                } else if (dataLen > 0) {
                    $('.zhanwei').removeClass('zhanwei');
                } else {
                    $('.bettingRecordList').addClass('zhanwei');
                    var mainTop = $(".bettingRecordList").offset().top;
                    var newHeight = windowHeight - mainTop;
                    $(".bettingRecordList").css({ height: newHeight });
                }
                if (dataLen > 0) {

                    if (page <= 2 && type != 0) {
                        //data.trantype[data.single_money[0].type]
                        var singleLen = data.single_money.length;
                        var type_flag = data.total_money.money_type == 1 ? '+ ' : '- ';
                        var type_flagColor = data.total_money.money_type == 1 ? '#34b86c' : '#d22727';
                        result = '<li class="fixed-li">' +
                            '<div>' +
                            '<em> 总计金额：</em><span style="color: ' + type_flagColor + '"> ' + type_flag + data.total_money.money + '</span>';
                        for (var i = 0; i < singleLen; i++) {
                            result += '<em> ' + data.trantype[data.single_money[i].type] + '：</em><span> ' + data.single_money[i].money + '</span>';
                        }
                        result += '</div>' +
                            '</li>';

                    }
                    for (var i = 0; i < dataLen; i++) {
                        record_type = '';
                        //判断类型
                        if (data['list'][i].issue !== '') {
                            record_type = "期号：" + data['list'][i].issue;
                        }
                        if (data['list'][i].pay_type !== '') {
                            record_type = "类型：" + data['list'][i].pay_type;
                        }
                        var flag = data['list'][i].money_type == 1 ? '+ ' : '- ';
                        var flagColor = data['list'][i].money_type == 1 ? '#34b86c' : '#d22727';

                        /*if (data['list'][i].type != 10 && data['list'][i].type != 11 && data['list'][i].type != 13) {
                            href_d = "#";
                        }*/
                        //大转盘活动，暂无详情
                        if (data['list'][i].type == '1000' || data['list'][i].type == '120') {
                            href_d = "javascript:;";
                            var status_txt = data['list'][i].status_txt;
                        } else {
                            var status_txt = '完成';
                        }

                        if (data['list'][i].type == '999') {
                            href_d = "javascript:;";
                            var status_txt = data['list'][i].status_txt;
                        } else {
                            var status_txt = '完成';
                        }

                        if (data['list'][i].type == '998') {
                            href_d = "javascript:;";
                            var status_txt = data['list'][i].status_txt;
                        } else {
                            var status_txt = '完成';
                        }
                        
       					if (data['list'][i].is_show_detail == 1) {
       						href_d = "https://www-pc77.com/?m=web&c=account&a=recordDetail&type=" + data['list'][i].type + "&id=" + data['list'][i].id + "&order_sn=" + data['list'][i].order_no + "&start_time=" + start_time + "&end_time=" + end_time +"&types=" + type + "&status=" + status;
       						href_d = '<li data-href="' + href_d + '">';
       					} else {
                        	href_d = '<li>';
       					}

                        result += href_d +
                            '<div>' +
                            '<div>' +
                            '<label>' + data['list'][i].name + '</label>' +
                            '<em>' + record_type + '</em>' +
                            '</div>' +
                            '<p>' + data['list'][i].addtime + '</p>' +
                            '</div>' +
                            '<div>' +
                            '<div>' +
                            '<span style="color: ' + flagColor + '">' + flag + data['list'][i].money + '</span>' +
                            '</div>' +
                            '<p>状态：' + status_txt + '</p>' +
                            '</div>' +
                            '</li>';
                    }
                    // 锁定
                    // me.lock();
                } else {
                    // 锁定
                    me.lock();
                    // 无数据
                    me.noData();
                    $(".dropload-down").remove();
                }
                // 为了测试，延迟1秒加载
                setTimeout(function() {
                    $('#record_list').append(result);
                    if ($(".fixed-li").length) {
                        $(".bettingRecordList").css({ "bottom": "98px" });
                        $(".dropload-down").css({ "height": "145px" });
                        var wid = 0;
                        $(".fixed-li div").children().each(function(index,item) {
                            wid += Math.ceil($(item).outerWidth()+1);
                        });
                        $(".fixed-li div").width(wid);
                    }

                    // 每次数据加载完，必须重置
                    me.resetload();
                }, 1000);

            },
            error: function(xhr, type) {
                // 即使加载出错，也得重置
                //me.resetload();
            }
        });
    }

    // //条件筛选
    // function getData() {
    //     // start_time = $("input[name=start_time]").val();
    //     // end_time = $("input[name=end_time]").val();
    //     // type = $("select[name='type']").val();
    //     // status = $("select[name='status']").val();

    //     var start_time = "2017-11-1";
    //     var end_time = "2017-11-23";
    //     // var type = $("#type").attr("data-id");
    //     // var status = $("#status").attr("data-num");
    //     var windowHeight = $(window).height();
    //     var mydate = new Date();
    //     var n = mydate.getFullYear(),
    //         y = mydate.getMonth() + 1,
    //         r = mydate.getDate();
    //     y = y < 9 ? '0' + y : y;

    //     if (start_time == "") {
    //         start_time = n + '-' + y + '-' + r;
    //     }
    //     if (end_time == "") {

    //         end_time = n + '-' + y + '-' + r;
    //     }
    //     console.log(start_time);
    //     console.log(end_time);
    //     console.log(type);
    //     var d1 = start_time.substring(5, 7);
    //     var d2 = end_time.substring(5, 7);
    //     if (start_time.substring(0, 4) == end_time.substring(0, 4)) //判断同一年
    //     {
    //         if (Number(d2) - Number(d1) > 0) {
    //             layer.open({
    //                 content: "只能查看一个月的数据",
    //                 skin: 'msg',
    //                 time: 2 //2秒后自动关闭
    //             });
    //             //                    layer.open({
    //             //                        content: "<p class='alert_msg'>只能查看一个月的数据</p>",
    //             //                        btn: '<p class="alert_buttom">我知道了</p>'
    //             //                    });

    //         } else {
    //             pageData();
    //         }
    //     } else {
    //         layer.open({
    //             content: "只能查看一个月的数据",
    //             skin: 'msg',
    //             time: 2 //2秒后自动关闭
    //         });
    //     }
    //     // pageData();
    // }

    //apple
    function showMask(flag) {
        $(".mask").show();
        if(flag){
            $("#status-pop").removeClass("down");
            $("#status").addClass("active");
        }else{
            $("#type-pop").removeClass("down");
            $("#type").addClass("active");
        }
    }

    function closeMask(flag) {
        $(".mask").hide();
        $("#status-pop").addClass("down");
        $("#status").removeClass("active");
        $("#type-pop").addClass("down");
        $("#type").removeClass("active");
        $("#date-pop").addClass("down");
    }

    //类型选择
    $("#type-pop li").click(function() {
        $("#startT em").text();
        $("#endT em").text();
        $(this).addClass("active").siblings().removeClass();
        var id = $(this).attr('data-id');
        $("#type").text($(this).text());
        $("#type").attr("data-id", id);
        status = $("#status").attr("data-id");
        type = $("#type").attr("data-id");
        page = 1;
        $(".dropload-down").remove();
        closeMask();
        readyFun();
    });
    //时间选择
    $("#timeSelect").click(function() {
        $(".mask").show();
        $("#date-pop").removeClass("down");
    })
    //时间选择确定按钮
    $('#confirm-getDate').click(function(){
        $('#dateconfirm').click();
        $('#dateconfirm2').click();
        $("#startT em").text($("#beginTime").val());
        $("#endT em").text($("#endTime").val());

        if(new Date($("#beginTime").val()).getTime() <= new Date($("#endTime").val()).getTime()){
            $(".dropload-down").remove();
            type = $("#type").attr("data-id");
            page = 1;
            $(".dropload-down").remove();
            readyFun();
            closeMask();
        }else{
            layer.open({
                content: "开始时间不能晚于结束时间",
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
        }
    });
    // 状态选择
    $("#status-pop li").click(function() {
        $("#startT em").text();
        $("#endT em").text();
        $(this).addClass("active").siblings().removeClass();
        var id = $(this).attr('data-id');
        $("#status").text($(this).text());
        $("#status").attr("data-id", id);
        type = $("#type").attr("data-id");
        status = $("#status").attr("data-id");
        page = 1;
        $(".dropload-down").remove();
        closeMask(1);
        readyFun();
    });

    $("#type").click(function() {
        showMask();
    });
     $("#status").click(function() {
        showMask(1);
    });
    $(".pop-cansel, .mask").click(function() {
        closeMask();
    })
    $("#reset").click(function(){
        window.location.href = '?m=web&c=account&a=billsWeb';
    })
    function goAccountIndex() {
	    location.href= "https://www-pc77.com/?m=web&c=account&a=index";
    }
    </script>
</body>

</html>